{% extends "base.html" %}

{% block title %}搜索结果{% if query %} - "{{ query }}"{% endif %} - 个人博客{% endblock %}

{% block content %}
<div class="row">
    <div class="col-lg-8">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2>
                {% if query %}
                搜索结果：<span class="text-muted">"{{ query }}"</span>
                {% else %}
                搜索文章
                {% endif %}
            </h2>
            {% if query and posts %}
            <div class="text-muted">
                找到 {{ posts.total }} 篇文章
            </div>
            {% endif %}
        </div>

        <!-- Search Form -->
        <div class="card mb-4">
            <div class="card-body">
                <form method="GET" action="{{ url_for('main.search') }}">
                    <div class="input-group">
                        <input type="text" class="form-control form-control-lg" name="q" 
                               placeholder="搜索文章标题或内容..." value="{{ query or '' }}">
                        <button class="btn btn-primary btn-lg" type="submit">
                            <i class="fas fa-search"></i> 搜索
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Search Results -->
        {% if query %}
            {% if posts and posts.items %}
                {% for post in posts.items %}
                <article class="card mb-4">
                    <div class="card-body">
                        <h3 class="card-title h5">
                            <a href="{{ url_for('main.post_detail', slug=post.slug) }}" 
                               class="text-decoration-none text-dark">
                                {{ post.title }}
                            </a>
                        </h3>
                        
                        <div class="text-muted small mb-3">
                            <i class="fas fa-user"></i> {{ post.author.username }}
                            <i class="fas fa-calendar ms-3"></i> {{ post.created_at.strftime('%Y-%m-%d') }}
                            <i class="fas fa-eye ms-3"></i> {{ post.view_count }} 次浏览
                            {% if post.category %}
                            <i class="fas fa-folder ms-3"></i> 
                            <a href="{{ url_for('main.category_posts', slug=post.category.slug) }}" 
                               class="text-decoration-none">{{ post.category.name }}</a>
                            {% endif %}
                        </div>
                        
                        {% if post.excerpt %}
                        <p class="card-text">{{ post.excerpt }}</p>
                        {% else %}
                        <p class="card-text">{{ post.content_html[:200] | striptags }}...</p>
                        {% endif %}
                        
                        {% if post.tags %}
                        <div class="mb-3">
                            {% for tag in post.tags %}
                            <a href="{{ url_for('main.tag_posts', slug=tag.slug) }}" 
                               class="badge bg-secondary text-decoration-none me-1">
                                {{ tag.name }}
                            </a>
                            {% endfor %}
                        </div>
                        {% endif %}
                        
                        <a href="{{ url_for('main.post_detail', slug=post.slug) }}" 
                           class="btn btn-outline-primary btn-sm">
                            阅读全文 <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                </article>
                {% endfor %}

                <!-- Pagination -->
                {% if posts.pages > 1 %}
                <nav aria-label="搜索结果分页">
                    <ul class="pagination justify-content-center">
                        {% if posts.has_prev %}
                        <li class="page-item">
                            <a class="page-link" href="{{ url_for('main.search', q=query, page=posts.prev_num) }}">上一页</a>
                        </li>
                        {% endif %}
                        
                        {% for page_num in posts.iter_pages() %}
                            {% if page_num %}
                                {% if page_num != posts.page %}
                                <li class="page-item">
                                    <a class="page-link" href="{{ url_for('main.search', q=query, page=page_num) }}">{{ page_num }}</a>
                                </li>
                                {% else %}
                                <li class="page-item active">
                                    <span class="page-link">{{ page_num }}</span>
                                </li>
                                {% endif %}
                            {% else %}
                            <li class="page-item disabled">
                                <span class="page-link">...</span>
                            </li>
                            {% endif %}
                        {% endfor %}
                        
                        {% if posts.has_next %}
                        <li class="page-item">
                            <a class="page-link" href="{{ url_for('main.search', q=query, page=posts.next_num) }}">下一页</a>
                        </li>
                        {% endif %}
                    </ul>
                </nav>
                {% endif %}
            {% else %}
            <div class="text-center py-5">
                <i class="fas fa-search fa-3x text-muted mb-3"></i>
                <h4 class="text-muted">没有找到相关文章</h4>
                <p class="text-muted">尝试使用其他关键词搜索，或者浏览我们的分类和标签。</p>
                <a href="{{ url_for('main.index') }}" class="btn btn-primary">
                    <i class="fas fa-home"></i> 返回首页
                </a>
            </div>
            {% endif %}
        {% else %}
        <div class="text-center py-5">
            <i class="fas fa-search fa-3x text-muted mb-3"></i>
            <h4 class="text-muted">搜索文章</h4>
            <p class="text-muted">在上方输入框中输入关键词来搜索文章。</p>
        </div>
        {% endif %}
    </div>

    <!-- Sidebar -->
    <div class="col-lg-4">
        <!-- Search Tips -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0"><i class="fas fa-lightbulb"></i> 搜索技巧</h5>
            </div>
            <div class="card-body">
                <ul class="list-unstyled mb-0">
                    <li class="mb-2">
                        <i class="fas fa-check text-success"></i>
                        使用简洁的关键词
                    </li>
                    <li class="mb-2">
                        <i class="fas fa-check text-success"></i>
                        避免使用标点符号
                    </li>
                    <li class="mb-2">
                        <i class="fas fa-check text-success"></i>
                        尝试不同的关键词组合
                    </li>
                    <li>
                        <i class="fas fa-check text-success"></i>
                        检查拼写是否正确
                    </li>
                </ul>
            </div>
        </div>

        <!-- Popular Tags -->
        {% if tags %}
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0"><i class="fas fa-tags"></i> 热门标签</h5>
            </div>
            <div class="card-body">
                {% for tag in tags %}
                <a href="{{ url_for('main.tag_posts', slug=tag.slug) }}" 
                   class="badge bg-secondary text-decoration-none me-1 mb-1">
                    {{ tag.name }}
                </a>
                {% endfor %}
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}

